<template>
	<view class="xl-numbox"  :style="{width: $xl.calcUnit(width, 'rpx'), height: $xl.calcUnit(height, 'rpx'), borderRadius: shape === 'square' ? '4rpx':'100rpx'}">
		<view class="xl-numbox__minus" @click="_calcValue('minus')">
			<xl-icon name="xl-minus-bold" :size="fontSize" :color="inputValue <= min || disabled ? 'silver':btnColor"></xl-icon>
		</view>
		<view :disabled="disabled" class="xl-numbox__value" :style="{fontSize: fontSize+'px'}" type="number" @tap="ifShow(inputValue)" adjust-position="false">{{inputValue}}</view>
		<view v-if="showUnit" class="xl-numbox__unit">{{ unit }}</view>
		<view class="xl-numbox__plus" @click="_calcValue('plus')">
			<xl-icon name="xl-add-bold" :size="fontSize" :color="(max !=0 && inputValue >= max) || disabled ? 'silver':btnColor"></xl-icon>
		</view>
		<view class="modalBox" v-if="showHide">
			<view class="shade" @tap="modalHide"></view>
			<view class="modal">
				<view class="modalTitle">请输入数值 [{{min}} ~ {{max == 0 ? '∞' : max}}]</view>
				<view class="modalInput">
					<input class="info" placeholder-class="inputStyle" v-model="modelValue" :type="inputType" focus/>
				</view>
				<view class="modalBtnBox">
					<view class="btn" @tap="modalHide">取消</view>
					<view class="btn" @tap="confirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, watch} from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['update:modelValue','change'])
	
	let inputValue = ref(0)
	watch(() => props.modelValue, (newValue, oldValue) => {
		if(inputValue.value === +newValue) return
		inputValue.value = +newValue
		if(inputValue.value < props.min) {
			inputValue.value = props.min
			emits('update:modelValue', inputValue.value)
			emits('change', inputValue.value)
		}
		if(props.max != 0 && inputValue.value > props.max) {
			inputValue.value = props.max
			emits('update:modelValue', inputValue.value)
			emits('change', inputValue.value)
		}
	}, { immediate: true }) 
	
	watch(() => inputValue.value, (newValue, oldValue) => {
		if (+newValue !== +oldValue) {
			emits('update:modelValue', newValue)
			emits('change', newValue)
		}
	})
	
	function _calcValue(type) {
		if (props.disabled) {
			return
		}
		const scale = _getDecimalScale()
		let value = inputValue.value * scale
		let step = props.step * scale
		if (type === 'minus') {
			value -= step
		} else if (type === 'plus') {
			value += step
		}
		if (value < props.min || (props.max != 0 && value > props.max)) {
			return
		}
		inputValue.value = value / scale
	}
	function _getDecimalScale() {
		let scale = 1
		// 浮点型
		if (~~props.step !== props.step) {
			scale = Math.pow(10, (props.step + '').split('.')[1].length)
		}
		return scale
	}
	
	let modelValue = ref(0)
	let showHide = ref(false)
	// 显示modal
	function ifShow(e){
		if (props.disabled) return
		modelValue.value = e
		showHide.value = true
	}
	//隐藏modal
	function modalHide(){
		showHide.value = false
	}
	// 确定
	function confirm(){
		modelValue.value = + modelValue.value
		if(props.max > 0 && modelValue.value > props.max){
			inputValue.value = props.max
		}else if (modelValue.value < props.min) {
			inputValue.value = props.min
		}else{
			inputValue.value = modelValue.value
		}
		showHide.value = false
	}
</script>
<style lang="scss" scoped>
	.xl-numbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius: 100rpx;
		overflow: hidden;
		position: relative;
		.xl-numbox__minus,
		.xl-numbox__plus {
			margin: 0;
			background-color: v-bind(btnBackground);
			color: v-bind(numColor);
			flex: 1.8;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.xl-numbox__value {
			position: relative;
			background-color: v-bind(numBackground);
			color: v-bind(numColor);
			flex: 2;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0
		}
		
		.xl-numbox__unit {
			background-color: v-bind(numBackground);
			flex: 1.2;
			height: 100%;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
	

	

	.modalBox{
		.shade{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: rgba(0,0,0,.6);
		}
		.modal{
			width: 80%;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 40rpx 30rpx 30rpx;
			box-sizing: border-box;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 200;
			.modalTitle{
				font-size: 34rpx;
				color: #333;
				margin-bottom: 32rpx;
			}
			.modalInput{
				width: 100%;
				height: 40rpx;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 50rpx;
				.info{
					width: 95%;
					height: 100%;
					padding: 4rpx 10rpx 10rpx;
					border: none;
					border-bottom:2rpx solid v-bind(inputColor);
				}
			}
			.modalBtnBox{
				width: 100%;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: v-bind(inputColor);
				font-size: 30rpx;
				.btn{
					width: 25%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>